import React, { useState } from 'react';
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { ArrowUpDown, Bug, CalendarHeart, FolderTree, Grid3x3, List } from "lucide-react";

interface Archive {
    id: number;
    title: string;
    count: number;
    lastUpdate: string;
    description: string;
}

function ArchiveRecord() {
    const [sortBy, setSortBy] = useState('date');
    const [viewMode, setViewMode] = useState('grid');
    const categories: Archive[] = [
        {
            id: 1,
            title: '技术开发',
            count: 48,
            lastUpdate: '2024-01-15',
            description: '包含前端开发、后端架构、移动应用等技术文章'
        },
        {
            id: 2,
            title: '设计艺术',
            count: 36,
            lastUpdate: '2024-01-12',
            description: 'UI/UX设计、平面设计、创意灵感分享'
        },
        {
            id: 3,
            title: '生活随笔',
            count: 25,
            lastUpdate: '2024-01-10',
            description: '日常生活感悟、旅行见闻、美食探索'
        },
        {
            id: 4,
            title: '读书笔记',
            count: 32,
            lastUpdate: '2024-01-08',
            description: '文学作品、技术书籍、心理学著作读后感'
        }
    ];
    const dates: Archive[] = [
        {
            id: 1,
            title: '2024年1月',
            count: 15,
            lastUpdate: '2024-01-15',
            description: '本月更新15篇文章'
        },
        {
            id: 2,
            title: '2023年12月',
            count: 22,
            lastUpdate: '2023-12-31',
            description: '年终总结与新年计划'
        },
        {
            id: 3,
            title: '2023年11月',
            count: 18,
            lastUpdate: '2023-11-30',
            description: '秋季技术专题系列'
        },
        {
            id: 4,
            title: '2023年10月',
            count: 20,
            lastUpdate: '2023-10-31',
            description: '设计思维与实践探索'
        }
    ];
    const ArchiveCard: React.FC<{ archive: Archive; type: string }> = ({ archive }) => {
        return (
            <Card
                className="group relative overflow-hidden rounded-lg transition-all duration-300 bg-bigLightArea dark:bg-bigDarkArea hover:-translate-y-2 border-0 shadow-2xl dark:shadow-[0px_10px_16px_-4px_rgba(255,255,255,0.2)]"
            >
                {/* 暗黑模式下的白色阴影效果 */}
                <div className="absolute inset-0 dark:bg-gradient-to-br dark:from-white/5 dark:to-white/20 dark:opacity-0 dark:group-hover:opacity-100 transition-opacity duration-300" />
                <div className="absolute inset-0 bg-gradient-to-br from-gray-900 to-gray-800" />
                <div className="absolute inset-0 bg-cover bg-center opacity-30 mix-blend-overlay" />
                <div className="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-themeEnglishLight to-themeEnglishDark dark:from-themeEnglishDark dark:to-themeEnglishLight" />
                <div className="relative p-6">
                    <div className="flex items-center justify-between mb-6">
                        <div className="flex items-center space-x-3">
                            <div className="w-2 h-2 rounded-full bg-themeEnglishLight dark:bg-themeEnglishDark" />
                            <h3 className="text-xl font-bold bg-gradient-to-r bg-clip-text text-themeEnglishLight dark:text-themeEnglishDark">
                                {archive.title}
                            </h3>
                        </div>
                        <span
                            className={`px-4 py-1 rounded-full text-sm border border-themeEnglishLight/30 text-themeEnglishLight bg-themeEnglishLight/10 dark:border-themeEnglishDark/30 dark:text-themeEnglishDark dark:bg-themeEnglishDark/10`}
                        >
                            {archive.count} 篇文章
                        </span>
                    </div>
                    <p className="text-gray-400 mb-4 leading-relaxed">{archive.description}</p>
                    <div className="flex items-center justify-between">
                        <div className="text-sm text-gray-500">
                            最近更新时间：{archive.lastUpdate}
                        </div>
                    </div>
                    <div
                        className="absolute inset-0 bg-gradient-to-br from-themeEnglishLight/20 to-themeEnglishDark/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center backdrop-blur-sm"
                    >
                        <Button
                            className="!rounded-button whitespace-nowrap bg-gradient-to-r from-themeEnglishLight to-themeEnglishDark text-white hover:opacity-90 transition-opacity"
                            onClick={() => console.log(`Viewing ${archive.title}`)}
                        >
                            <Bug className="fas fa-microchip mr-2" />
                            访问档案
                        </Button>
                    </div>
                </div>
            </Card>
        );
    };
    return (
        <div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 py-24 px-4">
            <div className="max-w-7xl mx-auto">
                <div className="mb-8">
                    <div className="flex flex-wrap gap-4 items-center justify-between">
                        <div className="flex-1 max-w-md relative">
                        </div>
                        <div className="flex gap-4">
                            <div className="items-center gap-2 hidden md:flex">
                                <Button
                                    variant="outline"
                                    className={`!rounded-button whitespace-nowrap ${viewMode === 'grid' ? 'bg-smallLightArea dark:bg-smallDarkArea' : ''}`}
                                    onClick={() => setViewMode('grid')}
                                >
                                    <Grid3x3 />
                                    网格视图
                                </Button>
                                <Button
                                    variant="outline"
                                    className={`!rounded-button whitespace-nowrap ${viewMode === 'list' ? 'bg-smallLightArea dark:bg-smallDarkArea' : ''}`}
                                    onClick={() => setViewMode('list')}
                                >
                                    <List />
                                    列表视图
                                </Button>
                            </div>
                            <Button
                                variant="outline"
                                className="!rounded-button whitespace-nowrap"
                                onClick={() => setSortBy(sortBy === 'date' ? 'count' : 'date')}
                            >
                                <ArrowUpDown />
                                {sortBy === 'date' ? '按时间排序' : '按数量排序'}
                            </Button>
                        </div>
                    </div>
                </div>
                <Tabs defaultValue="category" className="w-full">
                    <TabsList className="mb-6 bg-smallLightArea dark:bg-smallDarkArea py-5 border border-gray-700">
                        <TabsTrigger value="category" className="text-lg">
                            <FolderTree className="mr-1" />
                            分类档案
                        </TabsTrigger>
                        <TabsTrigger value="date" className="text-lg">
                            <CalendarHeart className="mr-1" />
                            时间档案
                        </TabsTrigger>
                    </TabsList>
                    <TabsContent value="category">
                        <div
                            className={`grid ${viewMode === 'grid' ? 'grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6' : 'grid-cols-1 gap-4'}`}>
                            {categories.map(category => (
                                <ArchiveCard key={category.id} archive={category} type="category" />
                            ))}
                        </div>
                    </TabsContent>
                    <TabsContent value="date">
                        <div
                            className={`grid ${viewMode === 'grid' ? 'grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6' : 'grid-cols-1 gap-4'}`}>
                            {dates.map(date => (
                                <ArchiveCard key={date.id} archive={date} type="date" />
                            ))}
                        </div>
                    </TabsContent>
                </Tabs>
            </div>
        </div>
    );
};
export default ArchiveRecord